<template>
	<uni-popup ref="popup" type="dialog">
		<view class="form-container">
			<text class="form-title">{{ isEditMode ? '编辑BOSS' : '添加新BOSS' }}</text>
			<uni-forms ref="form" :model="formData" :rules="rules">
				<uni-forms-item label="头像" name="image">
					<image class="boss-image" :src="formData.image" mode="aspectFit" @click="openImageSelector"></image>
				</uni-forms-item>
				<uni-forms-item label="名称" name="name">
					<uni-combox :candidates="bosses" placeholder="请输BOSS名称" v-model="formData.name"></uni-combox>
				</uni-forms-item>
				<uni-forms-item label="所在地图" name="map">
					<uni-combox :candidates="maps" placeholder="请输入地图名称" v-model="formData.map"></uni-combox>
				</uni-forms-item>
				<uni-forms-item label="刷新周期" name="interval">
					<view class="interval-picker">
						<uni-number-box v-model="formData.interval" :min="1" :max="7200" />（分钟）
					</view>
				</uni-forms-item>
				<uni-forms-item label="上次刷新" name="lastTime">
					<uni-datetime-picker returnType="timestamp" v-model="formData.lastTime" />
				</uni-forms-item>
				<uni-forms-item label="是否提醒" name="isNotify">
					<switch style="transform: scale(0.7);" :checked="formData.isNotify" @change="toggleNotification"
						color="#4CD964" />
				</uni-forms-item>
				<uni-forms-item label="预警时间" name="notifyBefore">
					<view class="interval-picker">
						<uni-number-box v-model="formData.notifyBefore" :min="1" :max="30" />（分钟）
					</view>
				</uni-forms-item>
			</uni-forms>
			<view class="form-buttons">
				<button class="cancel-btn" size="mini" @click="cancel">取消</button>
				<button class="confirm-btn" size="mini" @click="submit">{{ isEditMode ? '保存' : '添加' }}</button>
			</view>			
			<image-selector ref="imageSelector" @select="chooseImage"></image-selector>
		</view>
	</uni-popup>
</template>

<script>
	import legendMaps from './map.js'
	import legendBosses from './bosses.js'
	export default {
		name: "boss-form",
		emits: ["submit"],
		data() {
			return {
				isEditMode: false,
				formData: {},
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入BOSS名称'
						}]
					},
					map: {
						rules: [{
							required: true,
							errorMessage: '请输入地图名称'
						}]
					},
					interval: {
						rules: [{
							required: true
						}]
					}
				},
				maps: legendMaps,
				bosses: legendBosses
			}
		},
		methods: {
			openImageSelector(){
				this.$refs.imageSelector.open()
			},
			chooseImage(img) {
				this.formData.image = img
			},
			toggleNotification(e) {
				this.formData.isNotify = e.detail.value
			},
			openWithData(bossData) {
				if (bossData) {
					this.formData = JSON.parse(JSON.stringify(bossData));
					this.isEditMode = true;
				} else {
					this.resetForm();
				}
				this.open();
			},
			getDefaultFormData() {
				return {
					id: 'boss_' + Date.now(),
					image: '/static/images/boss-default.png',
					name: '',
					map: '',
					interval: 60,
					lastTime: null,
					isNotify: false,
					notifyBefore: 5
				};
			},
			resetForm() {
				this.isEditMode = false;
				this.formData = this.getDefaultFormData();
				this.$refs.form && this.$refs.form.clearValidate();
			},
			open() {
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},
			cancel() {
				this.close();
			},
			async submit() {
				try {
					await this.$refs.form.validate();
					this.$emit('submit', {
						bossData: this.formData,
						isEdit: this.isEditMode
					});
					this.close();
				} catch (e) {
					console.log('表单验证失败:', e);
				}
			}
		}
	}
</script>

<style scoped>
	.form-container {
		padding: 20px;
		width: 80vw;
		background-color: #fff;
		border-radius: 8px;
	}

	.form-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 20px;
		display: block;
		text-align: center;
	}

	.interval-picker {
		padding: 10px;
		border: 1px solid #e5e5e5;
		border-radius: 4px;
		display: flex;
		flex-direction: row;
	}

	.form-buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
	}

	.cancel-btn {
		flex: 1;
		margin-right: 10px;
	}

	.confirm-btn {
		flex: 1;
		background-color: #007aff;
		color: white;
	}

	.boss-image {
		width: 50px;
		height: 50px;
		border-radius: 4px;
		object-fit: contain;
	}
</style>